<template>
    <div class="chart-wrapper">
        <h3 class="chart-title">历年谷类、豆类、薯类产量趋势</h3>
        <div ref="echartsBar" style="width:95%;height:85%;margin-top:15px"></div>
    </div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import { ref,onMounted,reactive } from 'vue';
    import axios from 'axios';
    let options = reactive([])
    const echartsBar = ref()
    function chartBarInit(){
        let myChart = echarts.init(echartsBar.value, {
            backgroundColor: 'transparent'
        })
        var option = {
            backgroundColor: 'transparent',
            color: ['#80FFA5', '#FF0087', '#FFBF00'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
                }
            },
            legend: {
                data: ['谷类',  '豆类', '薯类'],
                textStyle:{
                    color: 'white'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                data: ['2016','2017','2018','2019','2020','2021','2022']
                }
            ],
            yAxis: [
                {
                type: 'value'
                }
            ],
            series: [
                {
                name: '谷类',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
                },
                {
                name: '豆类',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 0, 135)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(135, 0, 157)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
                },
                {
                name: '薯类',
                type: 'line',
                stack: 'Total',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 191, 0)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(224, 62, 76)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: []
                }
            ]
        };
        const xdata = reactive([]) 
        const ydata = reactive([])
        const zdata = reactive([])
        for(let index=0;index<options.length;index++){
            let obj = options[index];
            xdata.push(obj.cerealyield);
            ydata.push(obj.legumesyield)
            zdata.push(obj.potatoproduction)
        }
        option.series[0].data = xdata
        option.series[1].data = ydata
        option.series[2].data = zdata
        myChart.setOption(option)
    }
    function getData(){
        axios.get('/api/queryCropRanks')
            .then((response)=>{
                if(response.data.code==200){
                    options = response.data.data;
                    chartBarInit();
                }
            })
    }
    onMounted(()=>{
        getData();
    })  
</script>

<style scoped>
.chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: transparent;
}

.chart-title {
    color: #fff;
    margin: 0;
    font-size: 18px;
    margin-bottom: 5px;
    text-align: center;
}
</style>